//初始化
function init() {
    var width = 480;
    var height = 320;

    var target = document.getElementById('target');

    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    target.appendChild(canvas);
    var ctx = canvas.getContext('2d');

    var rabbit = { x: width - 50, y: 50 };

    new TWEEN.Tween(rabbit).to({ y: height - 50 }, 3000).onUpdate(function(obj){
        //背景
        ctx.fillStyle = 'rgb(240, 250, 240)';
        ctx.fillRect(0, 0, width, height);

        //兔子
        ctx.fillStyle = 'rgb(150, 150, 150)';

        ctx.save();
        ctx.translate(obj.x, obj.y);

        ctx.beginPath()
        ctx.moveTo(0, 0);
        ctx.bezierCurveTo(15, 0, 15, -40, 5, -30);
        ctx.lineTo(0, 0);
        ctx.bezierCurveTo(-15, 0, -15, -40, -5, -30);
        ctx.lineTo(0, 0);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(0, 0, 15, 0, Math.PI * 2, true);
        ctx.fill();

        ctx.restore();
    }).start();

    var fox = { x: 50, y: 50 };

    new TWEEN.Tween(fox).to(rabbit, 3000).onUpdate(function(obj) {
        //狐狸
        ctx.fillStyle = 'rgb(200, 80, 200)';
        ctx.save();
        ctx.translate(obj.x, obj.y - 13);
        ctx.scale(1.2, 1.2);

        ctx.beginPath();
        ctx.moveTo(4, 24);
        ctx.lineTo(8, 16);
        ctx.lineTo( 14, 10 );
        ctx.lineTo( 15, 0 );
        ctx.lineTo( 9, -10 );
        ctx.lineTo( 2, 0 );
        ctx.lineTo( -2, 0 );
        ctx.lineTo( -9, -10 );
        ctx.lineTo( -15, 0 );
        ctx.lineTo( -14, 10 );
        ctx.lineTo( -8, 16 );
        ctx.lineTo( -4, 24 );
        ctx.closePath();
        ctx.fill();

        ctx.restore();
    }).start();

}

//动画函数
function animate() {
    var id = requestAnimationFrame(animate);
    var result = TWEEN.update();
    if(!result) cancelAnimationFrame(id);
}

init();
animate();